<script setup>
import { ref, onMounted,computed } from 'vue'
import { Setting, More, Document, Ticket, Shop, Service,Star } from '@element-plus/icons-vue'
import BottomNav from '@/components/BottomNav.vue'
import { getMe,recharge,getCouponCount,sign, getSign  } from '@/api/me'
import { useRouter } from 'vue-router'
import { ElMessage,ElMessageBox } from 'element-plus'

const router = useRouter()
const couponCount = ref(0)
const isSignedIn = ref(false)         // 是否今日已签到
const signInDays = ref(0)             // 连续签到天数
// 用户信息
const userInfo = ref({
  username: '游客用户',
  image: '@/img/default-avatar.png',
  balance: 0,
  point: 0,      // 积分
  exp: 0,        // 经验值
  level: 1       // 等级
})
const maxExpPerLevel = 1000 

// 登录状态检查
onMounted(async () => {
  const token = localStorage.getItem('authToken')

  if (!token) {
    ElMessage.info('请先登录')
    router.push('/me/login')
    return
  }

  try {
    const res = await getMe()
    if (res.code === 1) {
      const data = res.data
     userInfo.value = {
       username: data.username,
       image: data.image || '@/img/default-avatar.png',
       balance: data.balance || 0,
       point: data.point || 0,
       exp: data.exp || 0,
       level: data.level || 1
      }
    } else {
      ElMessage.error(res.msg || '获取用户信息失败')
    }
  } catch (error) {
    ElMessage.error('网络错误，请重试')
  }

  await fetchCouponCount()
  await fetchSignInStatus() // 新增这一行
})
const goToRechargeRecords = () => {
  router.push('/me/rechargeRecords')
}
// 控制弹窗显示
const showRechargeDialog = ref(false)

// 充值表单数据
const rechargeForm = ref({
  amount: 0
})

// 打开充值弹窗
const goToRecharge = () => {
  showRechargeDialog.value = true
}

// 提交充值
// 提交充值
const submitRecharge = async () => {
  const amount = rechargeForm.value.amount

  if (!amount || amount <= 0) {
    ElMessage.warning('请输入正确的金额')
    return
  }
// 检查充值后的余额是否超过上限
  const maxBalance = 100000; // 充值上限
  const currentBalance = userInfo.value.balance || 0;
  if (currentBalance + amount > maxBalance) {
    ElMessage.warning(`充值失败！账户金额已达上限（${maxBalance}元）`);
    return;
  }
  
  try {
    const res = await recharge(rechargeForm.value)
    if (res.code === 1) {
      ElMessage.success('充值成功！')
      showRechargeDialog.value = false

      // ✅ 刷新用户信息（包括等级、余额等）
      await refreshUserInfo()
    } else {
      ElMessage.error(res.msg || '充值失败')
    }
  } catch (error) {
    ElMessage.error(error.response?.data?.message || '网络错误，请重试')
  }
}
const setPresetAmount = (amount) => {
  rechargeForm.value.amount = amount
}

const handleLogout = () => {
  // 显示确认弹窗（可选）
  ElMessageBox.confirm('确定要退出登录吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    // 清空 localStorage
    localStorage.removeItem('authToken') // 移除 token
    localStorage.clear() // 可选：清除所有缓存

    // 跳转到登录页
    // 提示用户
    ElMessage.success('已退出登录')
    router.push('/')
  }).catch(() => {
    // 用户点击取消，不做任何操作
  })
}
// 跳转到修改个人信息页面
const goToEditProfile = () => {
  router.push('/me/edit')
}
const showContactDialog = ref(false)

const openContactDialog = () => {
  showContactDialog.value = true
}
const copyPhoneNumber = () => {
  const text = '+86 13797415076'

  // 尝试使用 clipboard API
  if (navigator.clipboard) {
    navigator.clipboard.writeText(text)
      .then(() => ElMessage.success('电话号码已复制'))
      .catch(() => fallbackCopyTextToClipboard(text))
  } else {
    fallbackCopyTextToClipboard(text)
  }
}

// 回退方法
function fallbackCopyTextToClipboard(text) {
  const textArea = document.createElement("textarea")
  textArea.value = text
  textArea.style.position = "fixed"
  textArea.style.top = "-999999px"
  textArea.style.left = "-999999px"
  document.body.appendChild(textArea)
  textArea.focus()
  textArea.select()
  try {
    const successful = document.execCommand('copy')
    if (successful) {
      ElMessage.success('电话号码已复制')
    } else {
      ElMessage.error('复制失败，请手动复制')
    }
  } catch (err) {
    ElMessage.error('复制失败，请手动复制')
  } finally {
    document.body.removeChild(textArea)
  }
}
const fetchCouponCount = async () => {
  try {
    const res = await getCouponCount()
    if (res.code === 1) {
      couponCount.value = res.data
    }
  } catch (error) {
    console.error('获取优惠券数量失败:', error)
  }
}

const experiencePercentage = computed(() => {
  const currentExp = userInfo.value?.exp || 0
  return Math.min((currentExp / maxExpPerLevel) * 100, 100)
})
const showPointsDialog = ref(false)

const showPointsInfo = () => {
  showPointsDialog.value = true
}
const fetchSignInStatus = async () => {
  try {
    const res = await getSign()
    if (res.code === 1) {
      signInDays.value = res.data || 0
      isSignedIn.value = signInDays.value > 0
    }
  } catch (error) {
    console.error('获取签到状态失败:', error)
  }
}

// 点击签到按钮
const handleSignIn = async () => {
  if (isSignedIn.value) {
    ElMessage.warning('您今天已经签到过了哦~')
    return
  }

  try {
    const res = await sign()
    if (res.code === 1) {
      ElMessage.success('签到成功！🎉')

      // ✅ 获取签到状态 + 刷新用户信息
      await fetchSignInStatus()
      await refreshUserInfo() // ✅ 更新用户信息（包括等级）
    } else if (res.code === 0) {
      ElMessage.info('您今天已经签到过了')
      isSignedIn.value = true
    } else {
      ElMessage.error(res.msg || '签到失败，请重试')
    }
  } catch (error) {
    ElMessage.error('网络错误，请重试')
    console.error('签到失败:', error)
  }
}
const showLevelDialog = ref(false)
const showLevelInfo = () => {
  showLevelDialog.value = true
}

const getLevelColor = (level) => {
  // 色调从蓝色过渡到红色
  const hue = Math.min(360, 120 - level * 3)
  return `hsl(${hue}, 70%, 50%)`
}
const refreshUserInfo = async () => {
  try {
    const res = await getMe()
    if (res.code === 1) {
      const data = res.data
      userInfo.value = {
        username: data.username,
        image: data.image || '@/img/default-avatar.png',
        balance: data.balance || 0,
        point: data.point || 0,
        exp: data.exp || 0,
        level: data.level || 1
      }
    } else {
      ElMessage.error('刷新信息失败')
    }
  } catch (error) {
    console.error('刷新用户信息失败:', error)
  }
}
</script>
<template>
  <div class="me-container">
    <!-- 头部背景 -->
    <header class="profile-header">
      <h2>无爱咖啡</h2>
    </header>

    <!-- 用户信息区 -->
    <section class="user-profile-card">
  <div class="avatar-section">
    <img :src="userInfo.image" alt="头像" class="user-avatar" />
  </div>
  <div class="info-section">
    <h3 class="username">{{ userInfo.username }}
   <span class="level-badge" :style="{ backgroundColor: getLevelColor(userInfo.level) }">
  Lv {{ userInfo.level }}
</span>
    </h3>

    <!-- 显示连续签到天数 -->
    <p v-if="signInDays.value > 0" class="sign-in-days">
      🔥 已连续签到 {{ signInDays.value }} 天
    </p>

    <!-- 签到按钮 -->
    <el-button
      v-if="!isSignedIn"
      @click="handleSignIn"
      size="small"
      type="primary"
      plain
      round
      class="sign-in-button"
    >
      签到
    </el-button>

    <el-button
      v-else
      size="small"
      disabled
      plain
      round
      class="sign-in-button signed"
    >
      本月已连续签到{{signInDays}}天
    </el-button>
  </div>
  </section>

    <!-- 统计数据 -->
    <section class="user-stats">
      <div class="stat-item">
        <div class="stat-value">{{ userInfo.point }}</div>
        <div class="stat-label">积分</div>
      </div>
<div class="stat-item">
    <div class="stat-value">{{ couponCount }}</div>
    <div class="stat-label">优惠券</div>
  </div>
      <div class="stat-item">
        <div class="stat-value">{{ userInfo.balance.toFixed(2) }}</div>
        <div class="stat-label">余额</div>
      </div>
    </section>

    <!-- 进度条 -->
<section class="progress-section">
  <p class="progress-text">
    当前等级：Lv {{ userInfo.level }} |
    当前经验值：{{ userInfo.exp }}/{{ maxExpPerLevel }}
  </p>
  <el-progress :percentage="experiencePercentage" :show-text="false" />
  <p class="progress-label">Max</p>
</section>

    <!-- 功能菜单 -->
<section class="menu-grid">
  <div class="menu-item" @click="goToRecharge">
    <el-icon><Coin /></el-icon>
    <span>充值</span>
  </div>
  <div class="menu-item" @click="goToRechargeRecords">
    <el-icon><Document /></el-icon>
    <span>储值记录</span>
  </div>
  <div class="menu-item" @click="handleLogout">
    <el-icon><SwitchButton /></el-icon>
    <span>退出登录</span>
  </div>
<div class="menu-item" @click="openContactDialog">
  <el-icon><Service /></el-icon>
  <span>联系客服</span>
</div>
  <div class="menu-item" @click="goToEditProfile">
  <el-icon><Setting /></el-icon>
  <span>修改个人信息</span>
  </div>
<div class="menu-item" @click="$router.push('/me/couponCenter')">
  <el-icon><Ticket /></el-icon>
  <span>我的优惠券</span>
</div>
<div class="menu-item" @click="showPointsInfo" >
  <el-icon><Star /></el-icon>
  <span>关于积分</span>
</div>
<div class="menu-item level-info" @click="showLevelInfo">
  <el-icon><Star /></el-icon>
  <span>关于等级</span>
</div>
</section>

    <!-- 底部导航 -->
    <footer class="bottom-nav">
      <BottomNav />
    </footer>
  </div>
<el-dialog v-model="showRechargeDialog" width="80%" title="充值" class="recharge-dialog">
  <el-form :model="rechargeForm" label-width=80px @submit.prevent="submitRecharge">
    <!-- 金额输入 -->
    <el-form-item label="金额￥:">
      <div class="recharge-input-container">
        <el-input
          v-model.number="rechargeForm.amount"
          placeholder="请输入金额"
          type="number"
          min="0.01"
        />
        <div class="preset-buttons">
          <el-button @click="setPresetAmount(20)">¥20</el-button>
          <el-button @click="setPresetAmount(50)">¥50</el-button>
          <el-button @click="setPresetAmount(100)">¥100</el-button>
        </div>
      </div>
    </el-form-item>

    <!-- 按钮组 -->
    <el-form-item>
      <div class="dialog-footer">
        <el-button @click="showRechargeDialog = false">取消</el-button>
        <el-button type="primary" @click="submitRecharge">确认</el-button>
      </div>
    </el-form-item>
  </el-form>
</el-dialog>
<el-dialog v-model="showContactDialog" title="联系客服" width="100%">
  <div class="contact-content">
    <p class="contact-phone">📞 客服热线：<strong>+86 13797415076</strong></p>
    <p class="contact-time">🕒 服务时间：09:00 - 21:00</p>
  </div>
  <template #footer>
    <div class="dialog-footer">
      <el-button @click="copyPhoneNumber">复制电话</el-button>
      <el-button @click="showContactDialog = false">关闭</el-button>
    </div>
  </template>
</el-dialog>
<el-dialog v-model="showPointsDialog" title="关于积分 🌟" width="80%" :show-close="true">
  <div style="text-align: center; padding: 20px;">
    <p style="font-size: 16px; color: #333; margin-bottom: 15px;">
      🎉 积分就是您的专属特权通行证！
    </p>

    <p style="font-size: 14px; color: #555; margin-bottom: 15px;">
      ✨ 每次消费、签到都能获得积分哦～ (๑•̀ㅂ•́)و✧
    </p>

    <p style="font-size: 14px; color: #666; margin-bottom: 15px;">
      🎁 使用积分可以兑换限量周边礼品和隐藏福利！
    </p>

    <p style="font-size: 14px; color: #888;">
      📢 快去参与活动赚取更多积分吧～ (๑＞ڡ＜)
    </p>
  </div>
  <template #footer>
    <div class="dialog-footer">
      <el-button @click="showPointsDialog = false">关闭</el-button>
    </div>
  </template>
</el-dialog>
<el-dialog v-model="showLevelDialog" title="关于等级 🌟" width="80%" :show-close="true">
  <div style="text-align: center; padding: 20px;">
    <p style="font-size: 16px; color: #333; margin-bottom: 15px;">
      🌈 每升一级都有惊喜哦～ (๑•̀ㅂ•́)و✧
    </p>

    <p style="font-size: 14px; color: #555; margin-bottom: 15px;">
      🎁 <strong>升级即送大额优惠券</strong>，买咖啡更划算！
    </p>

    <p style="font-size: 14px; color: #666; margin-bottom: 15px;">
      🚀 <strong>未来还将开放线下会员活动</strong>，只有高等级用户才能参与！
    </p>

    <p style="font-size: 14px; color: #888;">
      📢 快去消费赚取经验值吧～ (๑＞ڡ＜)
    </p>
  </div>
  <template #footer>
    <div class="dialog-footer">
      <el-button @click="showLevelDialog = false">关闭</el-button>
    </div>
  </template>
</el-dialog>
</template>

<style scoped>
.contact-content {
  text-align: center;
  padding: 10px 0;
}

.contact-phone {
  font-size: 18px;
  color: #333;
  margin-bottom: 16px;
  white-space: nowrap;
}

.contact-time {
  font-size: 14px;
  color: #666;
}

.dialog-footer {
  display: flex;
  justify-content: center;
  gap: 16px;
}
.me-container {
  min-height: 100vh;
  background: #f5f5f5;
  padding-bottom: 50px;
}

.header {
  background: linear-gradient(180deg, #a8e5ff 0%, #f5f5f5 100%);
  padding: 20px 16px;
  border-radius: 0 0 20px 20px;
}

.header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.brand h2 {
  margin: 0;
  font-size: 20px;
  color: #333;
}

.actions {
  display: flex;
  gap: 16px;
}

.user-card {
  background: #fff;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.user-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.user-info h3 {
  margin: 0;
  font-size: 18px;
  color: #333;
}

.user-stats {
  display: flex;
  justify-content: space-around;
  margin-bottom: 20px;
}

.stat-item {
  text-align: center;
}

.stat-value {
  font-size: 20px;
  font-weight: bold;
  color: #333;
}

.stat-label {
  font-size: 12px;
  color: #999;
  margin-top: 4px;
}

.progress-bar {
  margin-top: 16px;
}

.progress-text {
  font-size: 12px;
  color: #666;
  margin-bottom: 8px;
}

.progress-label {
  font-size: 12px;
  color: #999;
  text-align: right;
  margin-top: 4px;
}

.menu-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  padding: 16px;
  background: #fff;
  margin: 16px;
  border-radius: 12px;
}

.menu-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: #333;
}

.menu-item .el-icon {
  font-size: 24px;
}

.menu-item span {
  font-size: 12px;
}

.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  padding: 8px 0;
  border-top: 1px solid #eee;
}

.bottom-nav .el-row {
  margin: 0;
}

.bottom-nav .el-col {
  text-align: center;
  cursor: pointer;
}

.bottom-nav .el-icon {
  font-size: 20px;
}

.bottom-nav .el-col div {
  font-size: 12px;
  margin-top: 4px;
}

.bottom-nav .el-col.active,
.bottom-nav .el-col.active .el-icon {
  color: #ff6b6b;
}
.me-container {
  min-height: 100vh;
  background-color: #f8f9fa;
  padding-bottom: 60px;
  font-family: 'Segoe UI', sans-serif;
}

/* 顶部背景 */
.profile-header {
  background: linear-gradient(to right, #5c6bc0, #7e57c2);
  color: white;
  text-align: center;
  padding: 24px 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

.profile-header h2 {
  margin: 0;
  font-size: 24px;
  font-weight: bold;
}

/* 用户信息卡片 */
.user-profile-card {
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  padding: 20px;
  margin: 0 16px 20px;
}

.avatar-section {
  flex-shrink: 0;
  margin-right: 20px;
}

.user-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

.info-section {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
}

.username {
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

.balance {
  margin: 0 0 12px;
  font-size: 14px;
  color: #666;
}

/* 统计区域 */
.user-stats {
  display: flex;
  justify-content: space-around;
  background: #fff;
  padding: 16px;
  margin: 0 16px 20px;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.stat-item {
  text-align: center;
}

.stat-value {
  font-size: 20px;
  font-weight: bold;
  color: #333;
}

.stat-label {
  font-size: 12px;
  color: #888;
  margin-top: 4px;
}

/* 进度条区域 */
.progress-section {
  background: #fff;
  padding: 16px;
  margin: 0 16px 20px;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.progress-text {
  font-size: 13px;
  color: #666;
  margin-bottom: 8px;
}

.progress-label {
  font-size: 12px;
  color: #aaa;
  text-align: right;
  margin-top: 4px;
}

/* 功能菜单 */
.menu-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  padding: 16px;
  background: #fff;
  margin: 0 16px 20px;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.menu-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: #333;
  cursor: pointer;
  transition: transform 0.2s ease-in-out;
}

.menu-item:hover {
  transform: translateY(-2px);
}

.menu-item .el-icon {
  font-size: 24px;
  color: #5c6bc0;
}

.menu-item span {
  font-size: 13px;
  color: #555;
}

/* 底部导航栏 */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  padding: 10px 0;
  border-top: 1px solid #eee;
  z-index: 100;
}

.bottom-nav .el-col {
  text-align: center;
  cursor: pointer;
  font-size: 12px;
  color: #888;
}

.bottom-nav .el-icon {
  font-size: 20px;
  margin-bottom: 4px;
}

.bottom-nav .el-col.active,
.bottom-nav .el-col.active .el-icon {
  color: #5c6bc0;
}
.recharge-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100px; /* 固定宽度 */
  height: 32px; /* 可选：固定高度，或用 line-height 自动适应 */
  padding: 0 12px;
  font-size: 12px;
  border-radius: 20px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.recharge-button .el-icon {
  margin-right: 4px;
}
.avatar-section {
  flex-shrink: 0;
  margin-right: 24px;
}

.user-avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

.info-section {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
}

.username {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: bold;
  color: #333;
}

.balance {
  margin: 0 0 12px;
  font-size: 14px;
  color: #666;
}
.recharge-input-container .el-input input[type="number"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: textfield;
  padding-right: 40px;
  font-size: 16px;
  text-align: center;
}

.preset-buttons {
  display: flex;
  justify-content: space-around; /* 或 center / space-between */
  gap: 10px; /* 可选：按钮之间间距 */
  margin-top: 10px;
}

.preset-buttons .el-button {
  display: inline-block;
  width: 23%;
  font-weight: bold;
  color: #5c6bc0;
  border-color: #5c6bc0;
  background-color: #e8eaf6;
}

.preset-buttons .el-button:hover {
  background-color: #c5cae9;
  color: white;
}
.recharge-dialog:deep(.el-dialog) {
  max-height: 60vh;
  margin-top: 10vh !important;
  overflow-y: auto;
  border-radius: 16px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.15);
}
.recharge-dialog:deep(.el-dialog__header) {
  background-color: #5c6bc0;
  color: white;
  font-size: 18px;
  font-weight: bold;
  padding: 20px;
}

.recharge-dialog:deep(.el-dialog__title) {
  color: white;
}

.recharge-dialog:deep(.el-dialog__body) {
  padding: 10px 20px;
}


.recharge-input-container {
  margin-bottom: 10px;
}

.recharge-input-container .el-input {
  width: 100%;
  max-width: 100%;
}

.recharge-input-container .el-input input[type="number"] {
  font-size: 24px;
  text-align: center;
  height: 50px;
  border-radius: 12px;
  border: 1px solid #ccc;
  transition: border-color 0.3s ease;
}

.recharge-input-container .el-input input[type="number"]:focus {
  border-color: #5c6bc0;
  box-shadow: 0 0 0 2px rgba(92, 107, 192, 0.2);
}

.preset-buttons {
  margin-top: 8px;
}
.preset-buttons .el-button {
  width: 100%;
  box-sizing: border-box;
  font-size: 16px;
  padding: 12px 0;
}

.dialog-footer {
  margin-top: 12px;
}

@media (max-width: 768px) {
  .recharge-input-container .el-input {
    width: 100%;
    max-width: 100%;
  }
  .preset-buttons {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
  }
  .preset-buttons .el-button {
    flex: 1 1 30%; /* 每行最多三个按钮 */
    min-width: 30%;
  }
}
.points-dialog :deep(.el-dialog__header) {
  background-color: #ffe0e0;
  color: #d32f2f;
  font-weight: bold;
}

.points-dialog :deep(.el-dialog__body) {
  background: #fff8e1;
  border-top: 1px dashed #ffcc80;
  border-bottom: 1px dashed #ffcc80;
}
.sign-in-button {
  width: 35%; /* 自适应内容 */
  align-self: flex-end;
  margin-top: 8px;
  font-size: 14px;
  padding: 6px 14px;
}

.sign-in-button.signed {
  background-color: #fff3e0;
  color: #ef6c00;
  border-color: #ef6c00;
}

.sign-in-days {
  font-size: 12px;
  color: #ff9800;
  margin-top: 4px;
}
.level-info {
  color: #7e57c2;
}

.level-info .el-icon {
  color: #7e57c2;
}

.level-info:hover {
  transform: translateY(-2px);
  background-color: #ede7f6;
}
.level-badge {
  display: inline-block;
  padding: 2px 8px;
  font-size: 12px;
  border-radius: 12px;
  color: white;
  font-weight: bold;
  margin-left: 8px;
}

.level-1,
.level-2,
.level-3,
.level-4,
.level-5 {
  background-color: #999;
}

.level-6,
.level-7,
.level-8,
.level-9,
.level-10 {
  background-color: #409EFF;
}

.level-11,
.level-12,
.level-13,
.level-14,
.level-15,
.level-16,
.level-17,
.level-18,
.level-19,
.level-20 {
  background-color: #67C23A;
}

.level-21,
.level-22,
.level-23,
.level-24,
.level-25,
.level-26,
.level-27,
.level-28,
.level-29,
.level-30 {
  background-color: #E6A23C;
}

.level-31,
.level-32,
.level-33,
.level-34,
.level-35,
.level-36,
.level-37,
.level-38,
.level-39,
.level-40 {
  background-color: #F56C6C;
}
</style>
